<template>
  <div class="app-container">

    <el-dialog
      title="提示"
      :visible.sync="bannerStatus"
      width="670px"
    >
      <div class="filter-container">
        <el-input
          size="small"
          placeholder="可按照时间搜索，支持模糊"
          v-model="sucai.title2"
          clearable
          style="width: 400px"
          class="filter-item"
        />
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="searchSc(1,2)"
          >
            搜索
          </el-button>
        </el-button-group>
      </div>
      <div v-loading="checkBannerBoxLoading">

        <div class="scimgBox" style="height:400px;overflow-y: scroll">
          <div class="img" v-for="(item,idx) in Bannerlist.data" @click="checkBannerOk(item.imgPath)">
            <el-image
              :src="item.imgPath"
              style="width: 580px;"
              fit="cover"
            >
            </el-image>
            <div class="imgTips" style="font-size:18px;color:#000">
              <div>对应时间:{{ item.imgText }}</div>
            </div>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <el-drawer
      :visible.sync="useImgdraw"
      direction="rtl"
      title="素材库"
      size="40%"
      class="drawer"
      :close-on-press-escape="false"
    >
      <div class="filter-container">
        <el-input
          size="small"
          placeholder="请输入素材名称，支持模糊"
          v-model="sucai.title"
          clearable
          style="width:350px;"
          class="filter-item w-200"
        />
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="searchSc(1)"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="newSC"
          >
            新增素材
          </el-button>
        </el-button-group>
        <div class="scimgBox" style="display: flex;flex-wrap: wrap;min-height: 300px;" v-loading="scimgBox">
          <div class="img" v-for="(item,idx) in sclist.data">
            <el-image
              :src="item.imgPath"
              style="width: 200px;height:300px;"
              fit="cover"
              :preview-src-list="srcList"
            >
            </el-image>
            <div class="imgTips">
              <div class="strong">{{ item.imgText }}</div>
              <div>制作:{{ item.makeUserName }}</div>
              <div>制作时间:{{ item.dateline }}</div>
            </div>
            <div class="insertIMg" @click="insertImg(item.imgPath)">+ 插入文中</div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="dayMainStatus"
      direction="rtl"
      title="月报"
      size="80%"
      class="drawer"
      :close-on-press-escape="false"
    >
      <div v-loading="dayMainLoading" style="padding:0 80px;min-height:70vh;">

        <div style="display: flex;margin-bottom:30px;">
          <el-date-picker
            v-model="form.checktime"
            type="month"
            placeholder="选择月"
          >
          </el-date-picker>
          <el-button
            plain
            type="success"
            size="mini"
            style="display: flex;margin-left:20px;align-items: center;height:40px"
            @click.stop="aicreate()"
            :loading="ailoading"
          >
            <div style="display: flex;align-items: center">
              <i class="iconfont icon-dc-icon-rengongzhineng" style="font-size:18px;margin-right:5px;"></i>
              <span>使用Ai模板</span>
            </div>

          </el-button>
          <el-button
            plain
            type="warning"
            size="mini"
            style="display: flex;margin-left:20px;align-items: center;height:40px"
            icon="el-icon-s-grid"
            @click.stop="checkBanner()"
          >
            <div>
              <span>素材库选择Banner</span>
            </div>
          </el-button>

          <el-upload
            class="upload-demo"
            :action="BannerUploadUrl"
            :with-credentials="true"
            :on-success="OnsuccessBanner"
            :limit="1"
            :show-file-list="false"
            style="margin-left: 20px;height:40px"
          >
            <el-button plain icon="el-icon-upload2" type="warning" style="font-size:12px;">上传 Banner</el-button>
          </el-upload>
          <a :href="form.BannerImg" target="_blank"><img :src="form.BannerImg" style="height:40px;margin-left:20px;"></a>
        </div>
        <el-form ref="form" :model="form" label-width="50px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="段落1">
            <el-input v-model="form.title2"></el-input>
          </el-form-item>
          <el-form-item label="段落1">
            <el-input v-model="form.title3" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <div style="border: 1px solid rgb(221, 221, 221);">
              <Toolbar
                style="border-bottom: 1px solid #ddd;"
                :defaultConfig="toolbarConfig"
                :editor="editor"
                mode="default"
              />
              <div class="edit-main">
                <Editor
                  v-model="form.content"
                  mode="default"
                  @onCreated="onCreated"
                />
              </div>
            </div>
            <el-row style="margin-top:20px;">
              <el-button type="primary" @click="useImg">+ 使用素材库</el-button>
            </el-row>
            <el-row style="margin-top:20px;">
              <el-button type="primary" @click="review">发布</el-button>
              <el-button type="success" @click="refpost">重置</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <div class="calendarMain" v-loading="PageLoading" id="myElement">
      <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;">月历
        <el-button-group class="filter-item" style="margin-left:30px;">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="fetchData"
          >
            刷新
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="add"
          >
            新增月报
          </el-button>
        </el-button-group>
      </h3>
      <div class="week-main" v-for="(item,idx) in list">
        <el-descriptions :title="item.star_time" direction="vertical" :column="4" border>
          <el-descriptions-item label="发布日期">{{ item.pk_c_time }}</el-descriptions-item>
          <el-descriptions-item label="标题">
            <a :href="`https://wz.mala.cn/wz/sdzz?sdzz=huiyin&&id=${item.id}`" target="_blank">
              <el-tag>{{ item.title }}</el-tag>
            </a>
          </el-descriptions-item>
          <el-descriptions-item label="操作"><span class="edit">编辑</span><span class="del">删除</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="dateParms.page"
      :limit.sync="dateParms.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { AiMonthcreate, getMonthReport, reportDopostYuebao } from '@/api/wz'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Pagination from '@/components/Pagination'
import Liuyan from '@/components/Echats/Liuyan'
import Lingyu from '@/components/Echats/lingyu'
import Banjie from '@/components/Echats/banjie'
import Hotkey from '@/components/Echats/hotkey'
import { searchSCK } from '@/api/count'
import Cookies from 'js-cookie'
import { getToken } from '@/utils/auth'
export default {
  components: { Editor, Toolbar, Pagination, Liuyan, Lingyu, Banjie, Hotkey },
  data() {
    return {
      html: '',
      srcList: [],
      editor: {},
      useImgdraw: false,
      scimgBox: false,
      bannerStatus: false,
      BannerUploadUrl:'https://wz.mala.cn/superAdmin.Count/douploadBanner?token='+encodeURIComponent(Cookies.get('vue_admin_template_token')),
      toolbarConfig: {
        excludeKeys: 'emotion,group-more-style,underline,italic,color,bgColor,fontSize,lineHeight,fontFamily,|,codeBlock,fullScreen,undo,redo,group-video,group-indent,todo'
      },
      PageLoading: true,
      nowDay: '',
      dataPageloading: false,
      dayMainLoading: true,
      dayMainStatus: false,
      ailoading: false,
      sclist: [],
      toolsParms: {
        shoudao: 0,
        banjie: 0,
        banjielv: 0,
        manyilv: 0,
        fenlei: {
          tousu: 0,
          qiuzhu: 0,
          jianyi: 0,
          zixun: 0
        }
      },
      sucai: {
        title: '',
        title2: ''
      },
      dateParms: {
        starTime: '',
        page: 1,
        limit: 20
      },
      checkValue: '',
      form: {
        title: '',
        content: '',
        checktime: '',
        title3: '',
        title2: '',
        BannerImg:'',
      },
      list: [],
      total: 0,
      parms: {
        month: '',
        hotkey1: '',
        hotkey2: '',
        hotkey3: '',
        hotkey4: '',
        hotkey5: ''
      },
      count: {
        shoudao: 0,
        banjie: 0,
        anshibanjie: 0,
        bumanyi: 0,
        anshibanjielv: 0,
        manyilv: 0,
        lingyu: []
      },
      openDatamanger: false,
      autoechartSwitch: false,
      checkBannerFrom: { page:1,title: '', type: 1 },
      checkBannerBoxLoading: false,
      Bannerlist: [],
    }
  },
  created() {
    this.fetchData()

  },
  methods: {
    checkBannerOk(img){
      this.$set(this.form,'BannerImg',img)
      this.bannerStatus = false
    },
    checkBanner() {
      this.bannerStatus = true
      this.checkBannerBoxLoading = true
      searchSCK(this.checkBannerFrom).then(r => {
        this.checkBannerBoxLoading = false
        this.Bannerlist = r.data
      })
    },
    review() {
      reportDopostYuebao(this.form).then(r => {
        this.fetchData()
        this.refpost()
        this.$message.success('发布成功')
        window.open('https://wz.mala.cn/ybinfo?id=' + r.data)
      })
    },
    refpost() {
      this.form = {
        title: '',
        content: '',
        checktime: ''
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    newSC() {
      window.open('https://wz.mala.cn/admincp/#/report/monthcalendardiy')
    },
    OnsuccessBanner(response){
      this.$set(this.form,'BannerImg',response.data)
    },
    searchSc(page,type) {
      if (type == 2) {
        this.checkBannerBoxLoading = true
        searchSCK({type:1,title:this.sucai.title2}).then(r => {
          this.checkBannerBoxLoading = false
          if (r.code == 200) {
            this.Bannerlist = r.data
          }
        })
      } else {
        this.scimgBox = true
        searchSCK({page:page,...this.sucai}).then(r => {
          this.scimgBox = false
          if (r.code == 200) {
            this.sclist = r.data
            let srcList = []
            for (let i = 0; i < r.data.data.length; i++) {
              srcList.push(r.data.data[i].imgPath)
            }
            this.srcList = srcList
            console.log(this.srcList)
          }
        })
      }
    },
    insertImg(imgPath) {

      this.form.content += '<p style="text-align: center;margin:0 !important;"><img src="' + imgPath + '" style="width:280px;" alt="月报 - 群众呼声四川问政"></p>'
      this.editor.focus(false)
      // this.insertEnd()
    },
    aicreate() {
      if (!this.form.checktime) {
        this.$message.error('请选择月份')
        return false
      }
      this.ailoading = true
      AiMonthcreate({ insert: 'ai', day: this.form.checktime || '' }).then(r => {
        this.ailoading = false
        this.count = r.count
        this.parms = r.parms
        this.form = {
          title: r.data.title,
          title2: r.data.title2,
          title3: r.data.title3,
          content: r.data.content,
          checktime: this.form.checktime
        }
      }, data => {
        this.ailoading = false
      })
    },
    useImg() {
      this.useImgdraw = true
    },
    add() {
      this.checkValue = true
      this.dayMainStatus = true
      this.dayMainLoading = false
    },
    fetchData() {
      this.PageLoading = true
      getMonthReport(this.dateParms).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.PageLoading = false
      }, data => {
        this.PageLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.w-e-text-container {
  a {
    color: #336699;
  }
}

.calendarMain {
  padding: 0 20px;

  .el-calendar-day {
    height: 110px;
  }

  .el-calendar__title {
    font-size: 18px;
    font-weight: bold;
    color: #20a0ff;
  }

}

</style>
<style lang="scss" scoped>
.scimgBox {
  .img {
    border: 1px solid #ddd;
    padding: 5px;
    margin: 10px;
    position: relative;

    &:hover {
      border-color: #409EFF;
      cursor: pointer;
    }
  }

  .insertIMg {
    position: absolute;
    bottom: 80px;
    right: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    padding: 7px 10px;
    color: #fff;

    &:hover {
      background: rgba(0, 0, 0, 1);
    }
  }

  .imgTips {
    font-size: 12px;
    color: #777;

    & > div {
      margin: 5px 0;

      &.strong {
        font-size: 16px;
        color: #409EFF;
        font-weight: bolder;
      }
    }
  }
}


.tools {
  overflow: auto;
  height: 600px;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.echats {
  .lable {
    padding: 10px 0;
    color: orange;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
  }

  .fromitem {
    display: flex;
    align-items: center;
    margin-right: 50px;
    margin-bottom: 20px;

    .labes {
      width: 100px;
      text-align: right;
      margin-right: 10px;
    }
  }
}

.calendarMain {
  overflow: auto;

  .week-main {
    padding: 20px 0;
    max-width: 800px;
    border-bottom: 1px solid #eee;

    .edit, del {
      margin: 0 10px;
    }

    .edit {
      color: #20a0ff;
    }

    .del {
      color: orange;
    }
  }

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.filter-container {
  padding: 0 20px;
}

.edit-main {
  height: 400px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.calendarMain {
  .calendarBox {
    width: 100%;
    height: 100%;
    position: relative;

    &:hover {
      .itemPlus {
        display: block;
      }
    }

    .itemPlus {
      color: #ed883f;
      position: absolute;
      top: 0px;
      right: 5px;
      text-align: right;
      font-size: 12px;
      display: none;
    }

    .item {
      padding: 5px;
      font-size: 12px;
      text-align: justify;
      border-radius: 5px;
      color: #409EFF;
      background: #ecf5ff;

      &:hover {
        color: #ed883f;
      }
    }
  }
}
</style>
